<div class="modal-dialog modal-lg" role="document" id="exportModal">
    <div class="modal-content" tabindex="-1">
        <div class="modal-header">
            <div class="flex-horizontal">
                <div class="flex-grow">
                    <h3 class="modal-title" id="myModalLabel" data-bind="text: op.title, attr:{ class: 'modal-title ' + op.headerClass() }"></h3>
                </div>
                <div class="flex-grow text-right margin-right margin-right-sm">
                    <span class="text-muted">Time elapsed:</span> <span data-bind="text: op.duration"></span>
                </div>
                <div>
                    <button type="button" class="close" data-bind="click: close" aria-hidden="true">
                        <i class="icon-cancel"></i>
                    </button>
                </div>
            </div>
            <div class="notification-time" data-bind="text: op.displayDate().format('LLL')"></div>
        </div>
        <div class="modal-body">
            <div class="bg-info padding padding-sm small margin-bottom flex-horizontal" data-bind="visible: shardedSmugglerInProgress">
                <div><i class="icon-info"></i></div>
                <div>Report contains progress for shard #<span data-bind="text: currentShard"></span> only. Full report will be available when operation is done for all shards.</div>
            </div>
            
            <h3 class="text-danger" data-bind="visible: operationFailed">Operation failed!</h3>
            <div class="export-list" data-bind="visible: exportItems().length">
                <div class="export-legend">
                    <div class="name">
                    </div>
                    <div class="status status-processed">
                        status
                    </div>
                    <div class="read">
                        read
                    </div>
                    <div class="skipped">
                        skipped
                    </div>
                    <div class="errors">
                        errors
                    </div>
                </div>
                <div data-bind="foreach: exportItems">
                    <div class="export-item" data-bind="css: { 'nested-item': isNested }">
                        <div class="name">
                            <h3 data-bind="text: name, visible: !isNested"></h3>
                            <h4 data-bind="text: name, visible: isNested"></h4>
                        </div>
                        <div class="status status-processed" data-bind="visible: stage === 'processed'">
                            <i class="icon-check"></i> <span>Processed</span>
                        </div>
                        <div class="status status-processed-with-errors" data-bind="visible: stage === 'processedWithErrors'">
                            <i class="icon-warning"></i> <span>Processed with errors</span>
                        </div>
                        <div class="status status-errored" data-bind="visible: stage === 'error'">
                            <i class="icon-exclamation"></i> <span>Error</span>
                        </div>
                        <div class="status status-skipped" data-bind="visible: stage === 'skipped'">
                            <i class="icon-skip"></i> <span>Skipped</span>
                        </div>
                        <div class="status status-processing" data-bind="visible: stage === 'processing'">
                            <span class="global-spinner spinner-sm"></span>
                            <span data-bind="visible: $root.getProcessingSpeed(name) == null">
                                Processing
                            </span>
                            <span data-bind="visible: $root.getProcessingSpeed(name) != null">
                                <span data-bind="text: $root.getProcessingSpeed(name)"></span> items/sec
                            </span>
                        </div>
                        <div class="status status-waiting" data-bind="visible: stage === 'pending'">
                            <i class="icon-waiting"></i> <span>Pending</span>
                        </div>
                        <div class="read" data-bind="text: readCount, css: { 'text-muted': !hasReadCount }">
                        </div>
                        <div class="skipped" data-bind="text: skippedCount, css: { 'text-muted': !hasSkippedCount }">
                        </div>
                        <div class="errors" data-bind="text: erroredCount, css: { 'text-muted': !hasErroredCount }">
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <div class="export-list" data-bind="with: filesCount">
                <div class="export-item">
                    <div class="name">
                        <h3>Current File</h3>
                    </div>
                    <div class="progress-overall" data-bind="text: CurrentFileName"></div>
                    <div class="progress-count">
                        <strong data-bind="text: CurrentFile"></strong>
                        /
                        <span data-bind="text: FileCount"></span>
                    </div>
                </div>
            </div>
            <div class="export-list" data-bind="visible: uploadItems().length">
                <div data-bind="foreach: uploadItems">
                    <div class="export-item">
                        <div class="name">
                            <h3 data-bind="text: name"></h3>
                        </div>
                        <div class="progress-overall" style="width: 600px">
                            <div class="flex-horizontal" data-bind="with: uploadProgress">
                                <h3 class="flex-grow"><span data-bind="text: formattedTimeLeftToProcess"></span></h3>
                                <div class="percentage" data-bind="text: percentageFormatted, css: { 'text-success': completed }, attr: { title: textualProgress }"></div>
                            </div>
                            <div class="progress" data-bind="with: uploadProgress">
                                <div data-bind="css: { 'progress-bar-striped': !completed, 'progress-bar-primary': !completed, 'active': !completed, 'progress-bar-success': completed }, style: { width: percentageFormatted }, attr: { 'aria-valuenow': percentage, title: textualProgress } "
                                     class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                    <span class="sr-only" data-bind="text: percentageFormatted"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="clearfix" data-bind="visible: !operationFailed()">
                <div class="pull-right margin-top">
                    <button class="btn btn-default btn-sm" data-bind="click: toggleDetails">
                        <i class="icon-logs"></i><span data-bind="text: detailsVisible() ? 'Hide details':'Show details', clickBubble: false"></span>
                    </button>
                </div>
            </div>
            <div class="export-messages-container" data-bind="visible: detailsVisible">
                <pre class="margin-top export-messages"><code data-bind="text: messagesJoined"></code></pre>
            </div>
            <div class="clearfix margin-top margin-top-sm">
                <div class="toggle pull-left" data-bind="visible: detailsVisible() && !operationFailed()">
                    <input id="smuggler-monitoring" type="checkbox" data-bind="checked: tail, disable: op.isCompleted">
                    <label for="smuggler-monitoring">
                        Monitoring (tail -f)
                    </label>
                </div>
                <button class="pull-right btn btn-default btn-sm" data-bind="click: copyLogs, visible: detailsVisible()">
                    <i class="icon-copy-to-clipboard"></i> Copy details to clipboard
                </button>
            </div>
        </div>
        <div class="modal-footer">
            <div class="flex-horizontal">
                <div data-bind="visible: canDelay">
                    <div class="btn-group dropup">
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                                data-bind="requiredAccess: 'Operator'">
                            <span>Delay backup</span><span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" data-bind="click: _.partial(delayBackup, '01:00:00')"><span>1 hour</span></a></li>
                            <li><a href="#" data-bind="click: _.partial(delayBackup, '03:00:00')"><span>3 hours</span></a></li>
                            <li><a href="#" data-bind="click: _.partial(delayBackup, '06:00:00')"><span>6 hours</span></a></li>
                            <li><a href="#" data-bind="click: _.partial(delayBackup, '1.00:00:00')"><span>1 day</span></a></li>
                            <li><a href="#" data-bind="click: _.partial(delayBackup, '3.00:00:00')"><span>3 days</span></a></li>
                            <li><a href="#" data-bind="click: _.partial(delayBackup, '7.00:00:00')"><span>7 days</span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="flex-separator"></div>
                <div>
                    <button type="button" class="btn btn-default" data-bind="click: close" title="Close this dialog">
                        <i class="icon-cancel"></i><span>Close</span>
                    </button>
                    <button type="button" class="btn btn-danger" title="Abort this operation"
                            data-bind="click: killOperation, visible: killable, css: { 'btn-spinner': spinners.kill }, disable: spinners.kill">
                        <i class="icon-stop"></i><span>Abort</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
